<template>
  <div id="studentProduct">
    <div class="search_add">
      <template>
        <el-select v-model="searchValue" filterable clearable remote reserve-keyword placeholder="请输入姓名,如果不更新,点击右侧搜索按钮"
          :loading="loading" ref="searchIpt">
          <el-option v-for="(item,index) in nameList" :key="index" :label="item" :value="index">
          </el-option>
        </el-select>
      </template>
      <el-button icon="el-icon-search" circle></el-button>
      <el-button type="primary" @click="addStu" v-has="'add'">添加项目</el-button>
    </div>
    <div class="selectClass">
     <el-form>
        <el-form-item label="选择班级:">
          <el-select v-model="classes"
                     filterable
                     @visible-change="classVisible"
                     @change="classChange"
                     placeholder="请选择">
            <el-option label="全部"
                       value="all"></el-option>
            <el-option v-for="(item, index) in calssLsit"
                       :key="index"
                       :label="item"
                       :value="item">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form> 
    </div>
    <!-- 导出excel -->
    <div class="exportExcel">
      <el-button icon="iconfont icon-Excel" @click="exportExcel">导出excel数据</el-button>
    </div>
    <div class="tableBox">
      <el-table :data="stuList" v-loading="loading" border style="width: 100%">
        <el-table-column prop="headimgurl" align="center" label="头像" width="80">
          <template slot-scope="scope">
            <el-avatar shape="square" :size="50" fit="fill" :src="scope.row.headimgurl"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="name" align="center" label="姓名" width="150">
        </el-table-column>
        <el-table-column prop="class" align="center" label="班级">
        </el-table-column>
        <el-table-column prop="productUrl" align="center" label="项目">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template v-slot="{ row }">
            <el-button type="primary" class="btn" size="mini" icon="el-icon-view"
              @click="$router.push({ path: '/StudentManager/studentProfile' })" v-has="'read'">查看</el-button>
            <el-button type="primary" class="btn" size="mini" icon="el-icon-edit" v-has="'edit'" @click="editStu(row)">
              编辑</el-button>
            <el-button type="danger" class="btn" icon="el-icon-delete" size="mini" v-has="'delete'"
              @click="deleteStu(row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pages">
      <el-pagination background layout="prev, pager, next" :total="1000">
      </el-pagination>
    </div>
    <myDialog></myDialog>
  </div>
</template>
<script>
  import myDialog from "../../../../components/dialog"
  import * as api from "@/api"
  import qee from "qf-export-excel"
  import {
    getClassListApi,
    getStuListApi
  } from "@/api"
  import {
    mapState
  } from 'vuex'
  export default {
    directives: {
      'has': {
        // 自定义指令是得不到this
        bind: (el, bingind, vnode) => {
          // 判断当前用户按钮数组中是否包含此字段，如果包含那么不禁用按钮
          let permissionField = bingind.value
          // 是否具备这个按钮
          let hasPermission = vnode.context.userBtns.includes(permissionField)
          if (!hasPermission) {
            // 说明当前用户不具备按钮权限
            el.disabled = true;
            //保存原来的类名
            let oldClassName = el.className;
            //加上is-disbaled 显示进状态
            el.className = oldClassName + " " + "is-disabled"
          }

        }
      }
    },
    data() {
      return {
        calssLsit: [],
        value: "",
        searchValue: "",
        stuList: [],
        nameList: [],
        value: [],
        classes:"",
        loading: false,
      }
    },
    components: {
      myDialog
    },
    created() {
      this.getStuList()
    },
    mounted() {
      // 接受dialog更新数据信号
      this.$bus.$on("update-table", () => {
        this.getStuList()
      })
    },
    computed: { //计算属性
      ...mapState(["userBtns"]),
      newArr() { //通过arr衍生出另外一个数组
        return this.stuList.filter(item => item.productName.indexOf(this.key) !== -1)
      }
    },
    methods: {
      // 触发班级列表
      classVisible(isVisible){
         // 获取班级列表信息
         if(isVisible){
           getClassListApi()
             .then(res => {
               this.calssLsit = res.data.data
             })

         }
      },
      // 获取选择班级值
      classChange(query){
        console.log(query);
        if(query!=="all"){
          this.getStuList("","",query)
        }else{
          this.getStuList()
        }
      },
      // 添加项目
      addStu() {
        this.$bus.$emit("add-stu")
      },
      // 编辑信息
      editStu(row) {
        this.$bus.$emit("edit-stu", row)
        console.log(row);
      },
      // 获取成员
      getStuList(page="", count="",classes="") {
        // 打开加载特效
        this.loading = true
        // 获取成员信息
        getStuListApi(page, count,classes)
          .then(res => {
            if (res.data.data) {
              // 关闭加载特效
              this.loading = false
              this.stuList = res.data.data
              for (var i = 0; i < this.stuList.length; i++) {
                this.nameList.push(this.stuList[i].name)
              }
            }
          })
          .catch(err => {
            console.log(err);
            this.loading = false
          })
      },
      // 删除成员信息
      deleteStu(row) {
        this.$confirm('此操作将永久删除该成员, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.delStuApi(row.sId)
            .then(res => {
              console.log(res);
              if (res.data.state) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.getStuList()
              }else{
                if(res.data.code=="10026"){
                  this.$message.error(res.data.msg)
                }else{
                  this.$message.error("删除失败，该数据已经被删除")
                }
              }
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 导出Excel
      exportExcel() {
        let titleList = [{
            title: '头像',
            key: 'headimgurl'
          }, {
            title: '名字',
            key: 'name'
          }, {
            title: '项目地址',
            key: 'productUrl'
          },
          {
            title: '班级',
            key: 'class'
          },
          {
            title: '城市',
            key: 'city'
          },
          {
            title: '创建时间',
            key: 'cTime'
          }
        ]
        qee(titleList, this.stuList, "2103member")
      }

    }
  }
</script>
<style scoped lang="less">
  body {
    margin: 0;
  }

  #studentProduct {
    width: 100%;
    height: 100%;

    .search_add {
      display: flex;
      margin: 30px 10px;

      input {
        border-radius: 5px;
        width: 240px;
        height: 28px;
        border: 1px solid #DCDFE6;
      }

      input::-webkit-input-placeholder {

        color: rgb(153, 150, 150);
        font-size: 10px;
      }

      .el-icon-search {
        width: 40px;
        font: 20px/28px "";
        background: rgb(217, 241, 250);
        margin-left: 5px;
        border: 1px solid deepskyblue;
        border-radius: 5px;
      }

      .el-button.is-circle {
        margin-left: 5px;
        border-radius: 10%;
        color: rgb(63, 185, 233);
        background: rgb(217, 241, 250);
      }


      & /deep/ #add {
        border-radius: 5px;
        margin-left: 10px;
        background: rgb(78, 188, 224);
        border: 0;
        color: white;
      }
    }

    .selectClass {
      margin-left: 10px;
      font-size: 12px;

      & /deep/.el-input__inner {
        width: 180px !important;
      }
    }

    .exportExcel {
      float: right;
      margin: 10px 10px;

    }

    .tableBox {
      margin: 30px 10px;

      .tb {
        border-collapse: collapse;
        width: 100%;
      }

      .tb th {
        color: grey;
      }

      .tb td,
      .tb th {
        padding: 5px;
        border: 1px solid #d5d9e2;
        text-align: center;
      }

      .el-button.is-circle {
        border-radius: 10%;
      }

      .el-icon-view {
        background: #409EFF;
        border: 1px solid #DCDFE6;
        width: 60px;
        height: 28px;
        border-radius: 10%;
        margin-right: 10px;
        color: white;
      }


    }

    .pages {
      text-align: center;

      .el-pagination {
        margin: 20px 0;

        .el-pager {
          width: 300px;
        }

      }
    }
  }
</style>